其实没有做多复杂的效果，连 canvas 都没用上，都是一些简单的平面变换，不过一段看似复杂的动画往往都是几个简单的变换拼接而成，所以我们逐步拆解，很简单的就能得到一个扭蛋机十连抽效果。

我这边使用的是 tailwindcss 和 ts，在 uniapp  + vue3 的情况下写的小程序扭蛋机例子，不同框架下的同学可能要转换一下。

为了方便同学们学习，里面的素材都是远程图库的图片，可以直接取用。

先看效果

先搭一个背景界面和主框体

就一个主背景，我在小程序上开发，所以单位用的 rpx，如果有用 px 做单位的，一般换算方法是 1px = 2rpx 。

弹幕动画的本质是五张图片随机在界面上做平移处理，超出小程序界面则隐藏。

1.弹幕template：

        设定一个弹幕显示区域后，为其添加 overflow: hidden 属性，这样弹幕在进出容器边缘时隐藏。

        设置弹幕图片为  mode="heightFix" ，即等高情况下自适应宽度（实际开发情况根据你的素材做调整），由于我这里的素材故意设置的大小不同，因此在以同样的 transform 样式做平移的时候，速度上会有参差感。

2.弹幕scss

        样式中选择平移变换，这里解释一下为什么用 translate3d 而不是 translateX，主要原因是为了利用硬件加速，提高动画的性能和流畅性。尤其是iOS上浏览器在处理3D变换时通常会触发硬件加速，并且最重要的是非 translate3d 效果在ios的小程序上经常被吞（可恶的ios）

        然后动画中采用用百分比平移变换的原因是每个弹幕的长度不一样，导致的平移的速度也会有差别，能起到更加随机的视觉效果

3.弹幕ts

        有两个属性需要用代码做随机设置，一个是弹幕的高度，一个是弹幕出场的时间，即动画延迟时间。每个弹幕对象包含：top（弹幕的顶部位置）、startAnimation（控制动画是否开始）、src（弹幕内容或来源）

        这里弹幕我没有设置随机重新刷新，因为CSS动画已经是循环播放的，如果想要更加随机一点，后面可以再优化。目前的效果是每次进入页面，随机一种弹幕位置效果。

4.弹幕模块完整代码（背景 + 弹幕）

        中奖记录的实现是通过左侧元素的上下平移再搭配透明度来实现，这里我是通过动态计算 top 的位置以及主动设置中间三项的透明度来实现。其实如果只是做效果，可以只用纯静态css，要简单很多，但是我这里要考虑到实际对接接口，而接口数据的长度是不可控的，因此通过脚本来灵活计算。

1.中奖记录template与scss：

这里没有太多介绍的，核心上面已经说了，通过控制 top 和 opacity 属性来控制动画，记得加上 transition: all 0.4s ease; 否则是没有过渡效果的。ellipsis 单行省略三件套是我喜欢用的样式，在设定宽度的情况下，它能让内部超出范围的文字截取并用省略号代替。

2.中奖记录ts：

通过 showTop 来设定最上面那条显示的中奖记录的高度，这个值越大，中奖记录的显示范围就越靠下；showCount 用来设置显示的条目，我这里是控制其显示三条；intervalId 是轮询任务的id，在这里记录下来是为了离开页面的时候要将其销毁，否则会一直占用内存。

变换方式是，追加一个定时任务，每隔三秒将 recordList 里面每一项的 top 值减去60； 并且判断 在 top >= showTop && top {{ item.phone + '获得' + item.prizeName }} onLoad(async () => { startBarrageAnime() // 初始化静态弹幕效果 initActivityrecord() // 初始化中奖记录效果 }) // 弹幕设置 // 每个弹幕对象包含：top（弹幕的顶部位置）、startAnimation（控制动画是否开始）、src（弹幕内容或来源） const barrages = ref([ { top: 0, startAnimation: false, src: 'https://gitee.com/jingkunxu/img/raw/master/note/blog/barrage1.png' }, { top: 0, startAnimation: false, src: 'https://gitee.com/jingkunxu/img/raw/master/note/blog/barrage2.png' }, { top: 0, startAnimation: false, src: 'https://gitee.com/jingkunxu/img/raw/master/note/blog/barrage3.png' }, { top: 0, startAnimation: false, src: 'https://gitee.com/jingkunxu/img/raw/master/note/blog/barrage4.png' }, { top: 0, startAnimation: false, src: 'https://gitee.com/jingkunxu/img/raw/master/note/blog/barrage5.png' } ]) // 开始弹幕动画的函数 // 这里弹幕我没有设置随机重新刷新，因为CSS动画已经是循环播放的，如果想要更加随机一点，后面可以再优化 const startBarrageAnime = () => { // 遍历弹幕数组 barrages.value.forEach((barrage, index) => { // 计算随机顶部位置，使得弹幕垂直方向分布在一定范围内 const randomTop = Math.floor(Math.random() * 200) // 计算随机延迟时间，使得弹幕不是同时出现 const randomDelay = Math.random() * 10000 // 设置延时函数，到达随机延迟时间后开始弹幕动画 setTimeout(() => { barrage.top = randomTop // 设置弹幕的顶部位置 barrage.startAnimation = true // 开始动画 }, randomDelay) }) } /** ******** 获取中奖记录及轮播 begin *************/ interface Record { phone: string; // 用户的电话号码 prizeName: string; // 奖品名称 top: number; // 记录当前的顶部位置（用于动画或滚动） defaultTop: number; // 记录的默认顶部位置（初始位置） show: boolean; // 是否显示该记录 } const recordList = ref([]) // 扭蛋中奖记录 const showTop = 786 // 最上面那条广告的高度位置 const showCount = 3 // 显示三条左侧广告消息 const intervalId = ref() // 轮询任务的id，便于退出页面时销毁定时任务 const initActivityrecord = async () => { // 模拟中奖数据 const res = Array.from({ length: 15 }, () => ({ phone: '186****1234', prizeName: '锐星优惠券', top: 0, defaultTop: 0, show: false })) recordList.value = res.map((item: Record, i:number) => { const top = showTop + (60 * i - 1) return { ...item, top, defaultTop: top, // 保存初始高度，便于后面对总漂移数做判断 show: top >= showTop && top (showCount + 1)) { intervalId.value = setInterval(updateRecordTop, 3000) } // 追加一个定时任务，每隔三秒将 recordList 里面每一项的 top 值减去60； 并且判断 在 top >= showTop && top { // 更新top值，减去60 let newTop = item.top - 60 // 这里做一下判断，如果轮播的高度超出了总个数，就还原高度 if ((item.defaultTop - item.top) / 60 > (recordList.value.length - 4)) { newTop = item.defaultTop } // 判断新的top值是否在指定范围内，并设置show属性 const newShow = newTop >= showTop && newTop { clearInterval(intervalId.value) }) /** ******** 获取中奖记录及轮播 end *************/ .page { width: 100vw; min-height: 100vh; overflow: hidden; background-color: #ff0027; } /* 弹幕平移动画 */ .barrage-animation { animation-name: moveLeft; /* 指定动画名称 */ animation-duration: 10s; /* 指定动画时长 */ animation-play-state: running; /* 控制动画播放状态 */ animation-timing-function: linear; /* 指定动画速度曲线 */ animation-iteration-count: infinite; /* 指定动画循环次数 */ } /* 这里解释一下为什么用 translate3d 而不是 translateX，主要原因是为了利用硬件加速，提高动画的性能和流畅性。尤其是iOS上浏览器在处理3D变换时通常会触发硬件加速，并且最重要的是非 translate3d 效果在ios的小程序上经常被吞（可恶的ios） */ @keyframes moveLeft { /* 这里用百分比平移变换的原因是每个弹幕的长度不一样，导致的平移的速度也会有差别，能起到更加随机的视觉效果 */ 0% { transform: translate3d(100%, 0, 0) } 100% { transform: translate3d(-500%, 0, 0) } } /* 中奖记录轮播动画 */ .left-bar{ position: absolute; left: 106rpx; z-index: 100; max-width: 312rpx; padding: 8rpx 16rpx; color: #fff; font-size: 24rpx; background: rgb(0 0 0 / 0.3); border-radius: 50rpx; transition: all 0.4s ease; } .ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 4.小球动画：基于定位的平移动画

扭蛋动画就是直接设置小球的 top 和 left 坐标。

重要：这里解释一下为什么小球变换要用定位而不是更省性能的 transform: 因为部分机型对transform支持性不好,会被过滤掉(比如ios上transform2d不生效,1加ace2对transform单项变换不生效)，因此这种核心动画我选用定位来执行。

其实如果大家对机型的适配性要求不高，我是十分推荐使用 transform3d 来执行大量的变换的，会更加节省性能，如果实在无法避免使用定位来执行大量的变换，尽量将元素脱离文档流，比如设置为绝对定位。

这里由于转了gif图被抽帧所以看起来动画不够连贯，但是其实只要小球数量不是特别多，效果还是很丝滑的。

1.小球及容器 template

将扭蛋范围固定在容器 lottery-box-content 中并设置超出隐藏，这样就算小球的定位设置失误，使其超出了框体，也由于被隐藏所以没有违和感。

由于小球素材只有四种球，因此通过序列号 i%4 取余数来分配小球的外观，由于本篇文章重点都放在动画和效果的实现上，所以这里积分数据都是写死固定的，真实情况可以根据每次扭蛋来更新剩余分数。

2.小球及容器 scss

样式代码有很多，一条条来看。

首先是扭蛋机的框体和小球的样式，小球将定位单独抽出，方便后续较为直观的使用动画控制移动。

然后是球的掉落动画，在入场和扭蛋结束后执行，就是做一个竖直方向的来回震动，这个动画不是很重要，即便被ios屏蔽掉也影响不大，因此这里选用了 translateY 来执行。

最后是最为核心的小球移动动画，我这里手动测量出了小球在容器中的移动范围是 水平0-464 像素之间 ;  垂直方向 0-536 像素之间。

这也是我选择使用定位而不是transform来执行小球动画的原因，当我知道了扭蛋机边界的位置的时候，我可以很自然的模拟出更加真实的小球移动的路径（当x或y至少一个值到达了边界，就可以转换方向），而不用担心出现小球越界甚至虚空换向的问题了。

3.小球及容器 ts

ts中用来初始化小球以及衔接上面的小球动画，其实就是通过 animateClass 变量来控制 run_? 样式是否生效。

4.小球模块完整代码（背景 + 弹幕 + 中奖记录 + 小球）

这里通过控制两个三角形透明度动画的关键帧的先后顺序，达到一种箭头由外指向内的视觉效果。

这里动画很快，转成gif图看动画也不明显，就不贴图了，可以根据视频里看出这里标题的动画效果。

这一块不是很重要，属于锦上添花的功能，源码就不单独贴出了，放在后面一起给出吧。

最重要的地方来了，你以为的扭蛋机核心效果：小球乱窜效果；实际的扭蛋机核心效果：奖品弹窗效果。

扭蛋中的小球平移效果其实并不是很重要，因为用户视觉上只会停留很短的时间（一秒左右）就会被奖品弹窗给覆盖，因此奖品弹窗效果才是最重要的模块（用户视觉停留最长）。

这里奖品弹窗使用五层效果叠加，即 遮罩+底图+奖品图+蒙版+扫光层 的效果，因此要注意 z-index 的层级设置。

单抽和十连抽效果不同，先分开讲。

单抽效果比较简单，只需要添加一层扫光效果即可。

扫光的效果是，先绘制一条斜向的渐变div，接着以纵向或横向的方式平移即可。通过渐变让一道白光一闪而过，一开始使用的斜向位移，后来发觉只要背景是斜的，哪怕只做一个维度的平移而形成的视觉效果也像斜向扫描，因此去掉水平渐变。

接下来是十连抽的效果图，有了单抽效果图做铺垫，十连抽就很好理解了，只不过增加了十个扭蛋之间的依次展现的效果。

十连抽的核心在于，灵活设置不同的 animation-delay 属性，让多个商品之间的动画有错落感。

十连抽scss：

十连抽中有个翻转动画，如果是在 h5 端就很容易实现，直接使用 backface-visibility: hidden 让div背部的元素隐藏，可惜这里是小程序，backface-visibility: hidden 不生效，只能通过 opacity 来让翻转到背面的元素隐藏。

在ts中额外设置十连抽商品弹窗的位置，这里单独拿出来的 delay 属性是专门控制扫光动画的，渐现动画和翻转动画都是根据商品下标来按顺序来的，但是扫光动画是从左下角扫到右上角，所以独立设置一下delay属性。

效果如下：

最后的扫光动画一定要加上，它是立体感的灵魂。

注释写的很详细，可能有些同学没有在 tailwindcss 环境下，不过问题不大，那些模板中的样式都能望文知义，很好理解。